<template>
  <div>

  <h3 align="center">薪酬管理</h3>
  <el-button type="primary" @click="add" size="mini">新增</el-button>
    <el-select v-model="dateInfo" @change="dataChange()" placeholder="请选择" style="width:100px;float:right;">
           <el-option label="一月" :value="1"></el-option>
           <el-option label="二月" :value="2"></el-option>
           <el-option label="三月" :value="3"></el-option>
           <el-option label="四月" :value="4"></el-option>
           <el-option label="五月" :value="5"></el-option>
           <el-option label="六月" :value="6"></el-option>
           <el-option label="七月" :value="7"></el-option>
           <el-option label="八月" :value="8"></el-option>
           <el-option label="九月" :value="9"></el-option>
           <el-option label="十月" :value="10"></el-option>
           <el-option label="十一月" :value="11"></el-option>
           <el-option label="十二月" :value="12"></el-option>
       </el-select>

 <el-input v-model="keyword" placeholder="请输入搜索内容" style="width: 20%"></el-input>
     <el-button type="primary" icon="el-icon-search" @click="loaddata()">搜索</el-button>
 <el-table :data="salaryList" style="width: 100%">

      <el-table-column label="薪酬编号">
        <!-- 插槽，和迭代变量一个意思-->
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.salId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工编号">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.empId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工姓名">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.empName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="基本工资">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.basicSalary }}</span>
        </template>
      </el-table-column>
      <el-table-column label="绩效工资">
        <template slot-scope="scope">

          <span style="margin-left: 10px">{{ scope.row.performanceSalary }}</span>
        </template>
      </el-table-column>
      <el-table-column label="奖金">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.bonus }}</span>
        </template>
      </el-table-column>

      <el-table-column label="罚款">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.penalty }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发薪月份">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.month }}</span>
        </template>
      </el-table-column>

      <el-table-column label="总计">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.totalSal }}</span>
          </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)">
          <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

     <div class="block">
       <!-- page-size 默认每页显示条数-->
       <el-pagination
         @size-change="selectPage"
         @current-change="handleCurrentChange"
         :current-page="curPage"
         :page-sizes="[1, 3, 5, 10]"
         :page-size="rows"
         layout="jumper,total, sizes, prev, pager, next"
         :total="total">
       </el-pagination>
       <el-button type="primary" @click="test()" size="mini" style="float: right;">计算</el-button>

 </div>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">

      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="员工编号">
          <el-col :span="22">
            <input type="hidden" v-model="salaryForm.salId" />
            <el-input placeholder="请输入员工编号"  v-model="salaryForm.empId"></el-input>
          </el-col>
        </el-form-item>

         <el-form-item label="员工姓名">
          <el-col :span="22">
            <el-input placeholder="请输入员工姓名"   v-model="salaryForm.empName"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="基础工资">
          <el-col :span="22">
            <el-input placeholder="请输入基础工资"   v-model="salaryForm.basicSalary"></el-input>
          </el-col>
        </el-form-item>

          <el-form-item label="绩效工资">
       <el-col :span="22">
         <el-input placeholder="请输入绩效工资"    v-model="salaryForm.performanceSalary "></el-input>
       </el-col>
     </el-form-item>

     <el-form-item label="奖金">
       <el-col :span="22">
         <el-input placeholder="请输入奖金" v-model="salaryForm.bonus"></el-input>
       </el-col>
     </el-form-item>

      <el-form-item label="罚款">
       <el-col :span="22">
         <el-input placeholder="请输入罚款" v-model="salaryForm.penalty"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="发薪月份">
       <el-col :span="22">
         <el-input placeholder="请输入发薪月份" v-bind:disabled="salaryForm.salId" v-model="salaryForm.month"></el-input>
       </el-col>
     </el-form-item>
     <el-form-item label="统计">
       <el-col :span="22">
         <el-input placeholder="请输入总工资" v-model="salaryForm.totalSal"></el-input>
       </el-col>
     </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </span>
    </el-dialog>

    <!-- 计算对话框 -->
    <el-dialog :title="title" :visible.sync="isShow2" width="30%">

      <el-form ref="form" label-width="80px">
        <br>
        <el-form-item label="员工编号">
          <el-col :span="22">
            <input type="hidden" v-model="salaryForm.salId" />
            <el-input placeholder="请输入员工编号"  v-model="salaryForm.empId"></el-input>
          </el-col>
        </el-form-item>

     <el-form-item label="发薪月份">
       <el-col :span="22">
         <el-input placeholder="请输入发薪月份" v-bind:disabled="salaryForm.salId" v-model="salaryForm.month"></el-input>
       </el-col>
     </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow2 = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo2">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "salaryListEle",
    data() {
      return {
        keyword:'',
        dateInfo:'',
        salaryList: [],
        title: "新增", //模态框的标题
        salaryForm: { //表单请求对象
          // query:"",
          salId: null,
          empId: "",
          empName:"",
          basicSalary: "",
          performanceSalary:"",
          bonus:"",
          penalty:"",
          month:"",
          totalSal:""
        },
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前页
        rows: 5, //每页显示条数
        isShow: false,
        isShow2:false
      }
    },
    methods: {
      loaddata() { //加载数据
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/salary/list",
          type: "get",
          data: {
           "page": mythis.curPage,
           "row": mythis.rows,
           "keyWord":mythis.keyword
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.salaryList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage
          }
        })
      },
      dataChange(){
         var mythis =this;
       $.ajax({
         url: "http://localhost:8080/salary/monthList",
         type: "get",
         data: {
            "month":mythis.dateInfo
         },
         dataType: "json",
         success: function(data) {
           console.log(data)
          mythis.salaryList = data.info;
          mythis.total = data.total;
          mythis.totalPage = data.totalPage
 }
        })
          },
      test(){
        this.isShow2 =true ;
        this.title = "计算";
        this.salaryForm.empId= "";
        this.salaryForm.month = "";
      },

      add() { //打开新增模态框
        //显示模态框
         this.isShow = true;
        //更改模态框的标题
        this.title = "新增";
        //清除表单元素
        this.salaryForm.salId = null;
        this.salaryForm.empId= "";
        this,salaryForm.empName="",
        this.salaryForm.basicSalary = "";
        this.salaryForm.performanceSalary = "";
        this.salaryForm.bonus = "";
        this.salaryForm.penalty = "";
        this.salaryForm.month = "";
        this.salaryForm.totalSal = "";
      },
      update(x) { //打开修改模态框
        //显示模态框
        this.isShow = true;
        //更改模态框的标题
        this.title = "修改";
        console.log(x)
        //把选中的值赋值给模态框的表单元素
        this.salaryForm.salId = x.salId;
        this.salaryForm.empId= x.empId;
        this.salaryForm.empName= x.empName;
        this.salaryForm.basicSalary = x.basicSalary;
        this.salaryForm.performanceSalary = x.performanceSalary;
        this.salaryForm.bonus = x.bonus;
        this.salaryForm.penalty = x.penalty;
        this.salaryForm.month = x.month;
        this.salaryForm.totalSal = x.totalSal;
      },
      saveInfo() { //保存
        var url = ""
        if (this.title == "修改") {
          url = "http://localhost:8080/salary/update"
        }else{
          url = "http://localhost:8080/salary/add"
        }

        var mythis = this;
        $.ajax({
          url: url,
          type: "get",
          data: mythis.salaryForm,
          dataType: "json",
          success: function(data) {
            console.log(data)
            //alert(data.info);
            //mythis.$alert(data.info)
            mythis.$message(data.info)
            if (data.info == "保存成功") {
              //关闭模态框
              mythis.isShow = false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      saveInfo2() { //保存
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/salary/test",
          type: "get",
          data: mythis.salaryForm,
          dataType: "json",
          success: function(data) {
            console.log(data)
            //关闭模态框
            mythis.isShow2 = false;
            //刷新
            mythis.loaddata();
            // mythis.$message(data.info)
            // if (data.info == "保存成功") {
            //   //关闭模态框
            //   mythis.isShow = false;
            //   //刷新
            //   mythis.loaddata();
            // }
          }
        })
      },
     delInfo(x) { //删除
              var is = confirm("你确定要删除数据吗?");
                     if (is) {
                       var mythis = this;
                       $.ajax({
                         url: "http://localhost:8080/salary/del",
                         type: "get",
                         data: {
                           "salId": x.salId
                         },
                         dataType: "json",
                         success: function(data) {
                           console.log(data)
                           alert(data.info);
                           if (data.info == "删除成功") {
                             //刷新
                             mythis.loaddata();
                           }
                         }
                       })
                     }
                   },
      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },
      handleCurrentChange(v){//当前页触发事件
          this.curPage = v;
          this.loaddata();
      }
    },
    mounted() {
      this.loaddata();
      // console.log(this.$route.query.info)
    }
  }

</script>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
